<template>
  <div class="detailservice b_margin">
    <van-cell is-link @click="showPopup">
      <div class="title">
        <span v-for="item in datas" :key="item.service_id">{{item.title}}</span>
      </div>
    </van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }" class="">
      <div class="popup">
        <h4 class="title">服务说明</h4>
        <div class="item bottom_shadow" v-for="item in datas" :key="item.service_id">
          <div class="title">{{item.title}}</div>
          <div class="content">{{item.context}}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "DetailService",
  props: {
    datas: {
      type: Array
    }
  },
  data() {
    return {
      show: false
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    }
  }
};
</script>

<style lang="less" scoped>
.detailservice {
  .van-cell {
    padding: 10px;
    .title {
      span {
        float: left;
        padding-left: 20px;
        margin-right: 10px;
        display: block;
        position: relative;
        &::before {
          content: "";
          display: block;
          width: 20px;
          height: 20px;
          position: absolute;
          top: 0;
          left: 0;
          // background-color: chartreuse;
          background-image: url("~assets/images/icon/right.svg");
          background-size: 100%;
        }
      }
    }
  }
  .van-popup{
    background-color: #fff;
    .popup{
      
      >.title{
        text-align: center;
        font-weight: 400;
        font-size: 16px;
        
      }
      .item{
        padding: 10px;
        .title{
          color: #000;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>